function Swiper(el){  // this === swiper1/swiper2

    this.el = document.querySelector(el)
    this.page = this.el.querySelectorAll('ul li')
    this.t = null
    this.num = 1

    // 启动插件
    this.init()
}

Swiper.prototype.init = function() { 
    
    // 自动切换轮播图
    this.autoplay()
    // 分页器移入
    this.pageOver()
    // 分页器移出
    this.pageOut()
}

// 自动切换轮播图
Swiper.prototype.autoplay = function() {  // this === swiper1/swiper2

    this.t = setInterval(() => {   //父function中this 
        this.num++
        if (this.num>6) this.num = 1
        this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
        
        this.tbPage(this.num)
    }, 2000)
}


//分页器同步
Swiper.prototype.tbPage = function(num) {  

    this.el.querySelector('ul li.active').className = ''
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}


//分页器移入
Swiper.prototype.pageOver = function() { // this === swiper1/swiper2
    this.page.forEach( (item, i) => {
        item.onmouseover = () => { 
            clearInterval(this.t)
            this.num = i+1 // 同步图片的索引
            this.el.querySelector('img').src = `./imgs/img${this.num}.jpg`
            this.tbPage(this.num)
        }
    })
}


//分页器移出
Swiper.prototype.pageOut = function() {   // this === swiper1/swiper2 
    this.page.forEach(item => {  
        item.onmouseout = () => {
            this.autoplay()
        }
    })
}
